<template>
  <vxe-modal v-model="modalVisible" ref="xModal" title="新增需求" width="600" height="400" resize remember fullscreen>
    <template>
      <el-card>
        <vxe-form
          ref="xForm"
          class="data-form"
          title-align="right"
          title-width="300"
          :data="formData"
          :rules="formRules"
          @submit="submitEvent"
          @reset="resetEvent">
          <vxe-form-item title="需求名称" field="Name" span="24">
            <template v-slot="scope">
              <vxe-input v-model="formData.Name" placeholder="请输入需求名称" clearable @input="$refs.xForm.updateStatus(scope)"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="来源" field="Source" span="24">
            <template v-slot="scope">
              <dictionary-select v-model="formData.Source" placeholder="请选择来源" dictTypeCode="NEEDS_SOURCE" @change="$refs.xForm.updateStatus(scope)"></dictionary-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="优先级" field="Level" span="24">
            <template v-slot="scope">
              <dictionary-select v-model="formData.Level" placeholder="请选择优先级" dictTypeCode="LEVEL" @change="$refs.xForm.updateStatus(scope)"></dictionary-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="阶段" field="Stage" span="24">
            <template v-slot="scope">
              <dictionary-select v-model="formData.Stage" placeholder="请选择阶段" dictTypeCode="NEEDS_STAGE" @change="$refs.xForm.updateStatus(scope)"></dictionary-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="指派给" field="Userid" span="24">
            <template>
              <el-select
                clearable
                v-model="formData.Userid"
                filterable
                placeholder="请选择成员"
                no-data-text="无数据">
                <el-option v-for="item in teamMembers" :key="item.Userid" :label="item.Userrealname" :value="item.Userid">
                </el-option>
              </el-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="预计工时" field="Tasktime" span="24">
            <template>
              <el-input-number v-model="formData.Tasktime" :min="1" controls-position="right" :precision="0"></el-input-number>
            </template>
          </vxe-form-item>
          <vxe-form-item title="描述" field="Desc" span="24">
            <template v-slot="scope">
              <md-editor v-model="formData.Desc" @change="$refs.xForm.updateStatus(scope)"/>
            </template>
          </vxe-form-item>
          <vxe-form-item title="验收标准" field="Acceptance" span="24">
            <template v-slot="scope">
              <md-editor v-model="formData.Acceptance" @change="$refs.xForm.updateStatus(scope)"/>
            </template>
          </vxe-form-item>
          <vxe-form-item title="附件" field="Attachment" span="12">
            <template v-slot>
              <el-upload action="" :file-list="fileList" :auto-upload="false">
                <el-button size="small">点击上传</el-button>
              </el-upload>
            </template>
          </vxe-form-item>
          <vxe-form-item title=" " span="24">
            <template v-slot>
              <el-button type="info" native-type="submit">提交保存</el-button>
            </template>
          </vxe-form-item>
        </vxe-form>
      </el-card>
    </template>
  </vxe-modal>
</template>

<script>
import DictionarySelect from '@/components/element/DictionarySelect';
import MdEditor from '@/components/element/MdEditor';
import projectTeamApi from '@/api/projectTeamApi';
export default {
  components: {
    DictionarySelect,
    MdEditor
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    modalVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data () {
    return {
      formData: {
        Name: '',
        Source: '',
        Level: '',
        Stage: '',
        Userid: '',
        Tasktime: 1,
        Desc: '',
        Acceptance: '',
        Attachment: ''
      },
      formRules: {
        Name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
        Source: [{ required: true, message: '请选择来源', trigger: 'change' }],
        Level: [{ required: true, message: '请选择优先级', trigger: 'change' }],
        Stage: [{ required: true, message: '请选择阶段', trigger: 'change' }]
      },
      teamMembers: [],
      fileList: []
    }
  },
  created () {
    this.getTeamMembers()
  },
  methods: {
    getTeamMembers () {
      const params = {
        p: 1,
        pageOffset: 20,
        id: this.$route.params.id
      }
      projectTeamApi.getPage(params).then(({ Teams }) => {
        if (Teams) {
          this.teamMembers = Teams;
        }
      });
    },
    submitEvent () {},
    resetEvent () {
      this.formData = {
        Name: '',
        Source: '',
        Level: '',
        Stage: '',
        Userid: '',
        Tasktime: 1,
        Desc: '',
        Acceptance: '',
        Attachment: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input-number input {
  text-align: left;
}
</style>
